<template>
	<view>
		<view v-show="ifshow" @tap="ableClose" @touchmove.stop.prevent class="popup-layer"></view>
		<view ref="popRef" class="popup-content" @tap.stop="stopEvent" :style="_location">
			<slot></slot>
		</view>
		<div id="allmap" ref="allmap"></div>
	</view>
</template>

<script>
	import {
		BaiduMap
	} from '@/common/map.js';
	export default {
		name: 'popup-layer',
		model: {
			prop: 'showPop',
			event: 'change'
		},
		props: {
			showPop: {
				type: Boolean,
				default: false
			},
			direction: {
				type: String,
				default: 'top' // 方向  top，bottom，left，right
			},
			autoClose: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				ifshow: false, // 是否展示,
				translateValue: -100, // 位移距离
				site: -100,
				timer: null,
				iftoggle: false,
				title: '',
				lng: '',
				lat: ''
			};
		},
		computed: {
			_translate() {
				const transformObj = {
					top: `transform:translateY(${-this.translateValue}%)`,
					bottom: `transform:translateY(${this.translateValue}%)`,
					left: `transform:translateX(${-this.translateValue}%)`,
					right: `transform:translateX(${this.translateValue}%)`
				};
				return transformObj[this.direction];
			},
			_location() {
				const positionValue = {
					top: `bottom:${this.site}%;width:100%;`,
					bottom: `top:${this.site}%;width:100%;`,
					left: `right:0px;top:0;height:100%;`,
					right: `left:0px;top:0;height:100%;`
				};
				return positionValue[this.direction] + this._translate;
			}
		},
		mounted() {
			if (this.showPop) {
				// console.log(222);
				this.show();
			}
			let _this = this;
			this.$nextTick(function() {
				BaiduMap.init().then(BMap => {
					let map = new BMap.Map(this.$refs.allmap);
					let point = new BMap.Point(104.07, 30.67);
					map.centerAndZoom(point, 17);
					let geolocation = new BMap.Geolocation();
					geolocation.getCurrentPosition(function(r) {
						if (this.getStatus() == BMAP_STATUS_SUCCESS) {
							let mk = new BMap.Marker(r.point);
							map.addOverlay(mk); //标出所在地
							map.panTo(r.point); //地图中心移动
							//alert('您的位置：'+r.point.lng+','+r.point.lat);
							let point = new BMap.Point(r.point.lng, r.point.lat); //用所定位的经纬度查找所在地省市街道等信息
							let gc = new BMap.Geocoder();
							gc.getLocation(point, function(rs) {
								// _this.lng = rs.point.lng;
								// _this.lat = rs.point.lat;\
								_this.back_city({
									'cityName': rs.addressComponents.city,
									'area':rs.addressComponents.district
								})
								//_this.$emit('back_city', rs.addressComponents.province);
								//console.log(rs.addressComponents.province)
								//+rs.addressComponents.city+rs.addressComponents.district
								uni.setStorageSync('map', [rs.point.lng, rs.point.lat])
								uni.setStorageSync('getLngLat',1)
							});
						}
					});
				});
			});
		},
		watch: {
			showPop(value) {
				console.log(value);
				if (value) {
					this.show();
				} else {
					this.close();
				}
			}
		},
		methods: {
			back_city(e) {
				this.$emit('back_city', e);
			},
			stopMove(event) {
				return;
			},
			show(events) {
				this.ifshow = true;
				this.site = 0;
				let _open = setTimeout(() => {
					this.translateValue = 0;
					_open = null;
				}, 100);
				let _toggle = setTimeout(() => {
					this.iftoggle = true;
					_toggle = null;
				}, 300);
			},
			close() {
				if (this.timer !== null || !this.iftoggle) {
					return;
				}
				this.translateValue = -100;
				this.timer = setTimeout(() => {
					this.ifshow = false;
					this.timer = null;
					this.iftoggle = false;
					this.$emit('closeCallBack', null);
					this.$emit('change', false);
				}, 300);
			},
			ableClose() {
				if (this.autoClose) {
					this.close();
				}
			},
			stopEvent(event) {},
			doSome() {}
		}
	};
</script>

<style lang="scss">
	.popup-layer {
		position: fixed;
		z-index: 999999;
		// background: rgba(0, 0, 0, .3);
		height: 100%;
		width: 100%;
		top: 0px;
		left: 0px;
		overflow: hidden;
	}

	.popup-content {
		position: fixed;
		z-index: 1000000;
		background: #ffffff;
		transition: transform 0.2s ease;
		overflow: hidden;
	}
</style>
